<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rank-vilipixiv</title>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jquery-3.5.1.min.js') }}"></script>
    <script type="text/javaScript">
        window.addEventListener("scroll", function() {
            // 获取滚动条位置和可见窗口高度
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const visibleHeight = window.innerHeight;

            // 计算滚动到底部的临界值
            const scrollThreshold = document.documentElement.scrollHeight - visibleHeight*1.1;
            // 判断是否滚动到底部
            if (scrollTop >= scrollThreshold) {
            // 在此处执行加载更多图片的逻辑
                loadMoreImages();
            }
        });
        function loadMoreImages() {
            fetch('/images')
            .then(response => response.json())
            .then(data => {
            // 获得的图片URL数据
            const imageUrls = data;

            // 遍历URL数组，动态创建并添加新的图片元素到页面
            const container = document.getElementById("content-container");
            let p = 0
            imageUrls.forEach(function (url) {
                const img = document.createElement('img');
                img.className = 'card-img';
                img.src = '/static/img_top20/' + url;
                img.alt = url;
                img.setAttribute('data-image-id', url);

                const card = document.createElement('div');
                card.className = 'card card-pin';

                const overlayDiv = document.createElement('div');
                overlayDiv.className = 'overlay';

                const h2 = document.createElement('h2');
                h2.className = 'card-title title';
                h2.textContent = url;
                p += 1

                const moreDiv = document.createElement('div');
                moreDiv.className = 'more';

                const a = document.createElement('a');
                a.href = '/encoded_url/' + url;

                const i = document.createElement('i');
                i.className = 'fa fa-arrow-circle-o-right';
                i.setAttribute('aria-hidden', 'true');

                const textNode = document.createTextNode(' More');

                a.appendChild(i);
                a.appendChild(textNode);
                moreDiv.appendChild(a);

                overlayDiv.appendChild(h2);
                overlayDiv.appendChild(moreDiv);

                card.appendChild(img);
                card.appendChild(overlayDiv);

                {#const container = document.getElementById('content-container');#}
                container.appendChild(card);
            });
    });
}
    </script>
    <script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>
{#    <script src="{{ url_for('static', filename='js/jquery-3.5.1.min.js') }}"></script>#}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">

</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
    <a class="navbar-brand font-weight-bolder mr-3" href="{{ url_for('pixiv.index') }}">
        <img src="{{url_for('static',filename='img/logo.png')}}"></a>
    <button class="navbar-light navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarsDefault">
{#    	<ul class="navbar-nav mr-auto align-items-center">#}
{#    		<form class="bd-search hidden-sm-down">#}
{#                <label for="search-input"></label>#}
{#                <input type="text" class="form-control bg-graylight border-0 font-weight-bold" id="time-input" placeholder="日期，如2023910" autocomplete="off">#}
{#    			<div class="dropdown-menu bd-search-results" id="search-results">#}
{#    			</div>#}
{#    		</form>#}
{#            <form class="bd-search hidden-sm-down">#}
{#                <label for="search-input"></label>#}
{#                <input type="text" class="form-control bg-graylight border-0 font-weight-bold" id="type-input" placeholder="榜单类型" autocomplete="off">#}
{#                <div class="dropdown-menu bd-search-results" id="search-results">#}
{#    			</div>#}
{#    		</form>#}
{#    	</ul>#}
    	<ul class="navbar-nav ml-auto align-items-center">
    		<li class="nav-item dropdown">
    		<div class="dropdown-menu dropdown-menu-right shadow-lg" aria-labelledby="dropdown02">
    			<h4 class="dropdown-header display-4">Download Pintereso<br/> HTML Bootstrap Template</h4>
    			<div class="dropdown-divider">
    			</div>
    		</div>
    		</li>
    	</ul>
    </div>
    </nav>

    <section class="mt-4 mb-5">
    <div class="container mb-4">
    	<h1 class="font-weight-bold title">vilipixiv每日排行榜</h1>
    	<div class="row">
    		<nav class="navbar navbar-expand-lg navbar-light bg-white pl-2 pr-2">
    		<button class="navbar-light navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExplore" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
    		<span class="navbar-toggler-icon"></span>
    		</button>
    		<div class="collapse navbar-collapse" id="navbarsExplore">
    			<ul class="navbar-nav">
                    <li class="nav-item dropdown">
    				<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">陈万军</a>
    				<div class="dropdown-menu shadow-lg" aria-labelledby="dropdown01">
    					<a class="dropdown-item" href="/wanjun">时间分布散点图和名称长度趋势</a>
    				</div>
                    <li class="nav-item dropdown">
    				<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">高笑乐</a>
    				<div class="dropdown-menu shadow-lg" aria-labelledby="dropdown01">
    					<a class="dropdown-item" href="/uploads">热度分析和热度云图</a>
    				</div>
                    <li class="nav-item dropdown">
    				<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">耿浩杰</a>
    				<div class="dropdown-menu shadow-lg" aria-labelledby="dropdown01">
    					<a class="dropdown-item" href="/shanjiu">标签中英文数量和标签点赞数范围</a>
                        <a class="dropdown-item" href="/sj_ai">ai</a>
    				</div>
                    <li class="nav-item dropdown">
    				<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">杨光耀</a>
    				<div class="dropdown-menu shadow-lg" aria-labelledby="dropdown01">
                        <a class="dropdown-item" href="/ygy/page1">热榜前500点赞收藏数变化</a>
                        <a class="dropdown-item" href="/ygy">ai</a>
    				</div>
    				<li class="nav-item dropdown">
    				<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">解红越</a>
    				<div class="dropdown-menu shadow-lg" aria-labelledby="dropdown01">
    					<a class="dropdown-item" href="/canzhu_p1">ai识别图像占比类型</a>
    					<a class="dropdown-item" href="/canzhu_p2">标签热度前五十</a>
    				</div>
                    <li class="nav-item">
    				    <a class="nav-link" href="/finally_daping">最终大屏</a>
    				</li>
                </ul>
    		</div>
    		</nav>
    	</div>
    </div>
    </section>
    <div class="container-fluid">
            <div class="row">
                 <div id="content-container" class="card-columns">
                    <!-- 已加载的图片 -->
                    {% for image_name in image_names[loaded_count:loaded_count+load_more_count] %}
                    <div class="card card-pin">
                        <img class="card-img" src="{{ url_for('static', filename='img_top20/' + image_name) }}" alt="{{ image_name }}" data-image-id="{{ image_name }}">
                        <div class="overlay">
                            <h2 class="card-title title">{{ image_name }}</h2>
                            <div class="more">
                                <a href="{{ url_for('pixiv.post', image_name=image_name) }}">
                                    <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More
                                </a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                 </div>
            </div>
    </div>
    <footer class="footer pt-5 pb-5 text-center">
        
    <div class="container">
          <div class="socials-media">
            <ul class="list-unstyled">
              <li class="d-inline-block ml-1 mr-1"><a href="#" class="text-dark"><i class="fa fa-facebook"></i></a></li>
              <li class="d-inline-block ml-1 mr-1"><a href="#" class="text-dark"><i class="fa fa-twitter"></i></a></li>
              <li class="d-inline-block ml-1 mr-1"><a href="#" class="text-dark"><i class="fa fa-instagram"></i></a></li>
              <li class="d-inline-block ml-1 mr-1"><a href="#" class="text-dark"><i class="fa fa-google-plus"></i></a></li>
              <li class="d-inline-block ml-1 mr-1"><a href="#" class="text-dark"><i class="fa fa-behance"></i></a></li>
              <li class="d-inline-block ml-1 mr-1"><a href="#" class="text-dark"><i class="fa fa-dribbble"></i></a></li>
            </ul>
          </div>
        
            <!--
              All the links in the footer should remain intact.
              You may remove the links only if you donate:
              https://www.wowthemes.net/freebies-license/
            -->
            <p>©  <span class="credits font-weight-bold">
            <a target="_blank" class="text-dark" href="https://www.wowthemes.net/pintereso-free-html-bootstrap-template/"><u>Pintereso Bootstrap HTML Template</u> by WowThemes.net.</a>
          </span>
          </p>
    </div>
    </footer>
</body>
    
</html>
